<template>
  <div class="tool-bar">
    <input type="text" class="ipt" v-model="iptVal">
    <div class="btn" @click="addItem">确定</div>
  </div>

  <div class="list">
    <div @click="delItem(item)" class="item" v-for="item in list">{{ item }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const iptVal = ref('')

const list = ref(['西瓜', '🍎'])

const addItem = () => {
  if (!iptVal.value) return
  if (list.value.indexOf(iptVal.value) !== -1) return

  list.value.push(iptVal.value)
}

const delItem = name => {
  list.value = list.value.filter(item => item !== name)
}

</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.tool-bar {
  display: flex;
}

.ipt {
  line-height: 28px;
  height: 28px;
}

.btn {
  line-height: 28px;
  height: 28px;
  background-color: beige;
  flex: 1;
}

.list {
  background: #fff2cd;
  margin: 20px;
}

.item {
  padding: 4px;
  border: 1px solid gold;
}
</style>